<template>
  <div class="dashboard">
    <div class="dashboard-header">
      <h1>仪表板</h1>
      <p>欢迎使用苒兴教育管理系统</p>
    </div>
    
    <div class="stats-grid">
      <div class="stat-card">
        <div class="stat-icon">
          <el-icon size="40" color="#409EFF">
            <User />
          </el-icon>
        </div>
        <div class="stat-content">
          <h3>{{ stats.totalUsers }}</h3>
          <p>总用户数</p>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon">
          <el-icon size="40" color="#67C23A">
            <Document />
          </el-icon>
        </div>
        <div class="stat-content">
          <h3>{{ stats.totalQuestions }}</h3>
          <p>题目总数</p>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon">
          <el-icon size="40" color="#E6A23C">
            <Notebook />
          </el-icon>
        </div>
        <div class="stat-content">
          <h3>{{ stats.totalPapers }}</h3>
          <p>试卷总数</p>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon">
          <el-icon size="40" color="#F56C6C">
            <DataAnalysis />
          </el-icon>
        </div>
        <div class="stat-content">
          <h3>{{ stats.totalExams }}</h3>
          <p>考试总数</p>
        </div>
      </div>
    </div>
    
    <div class="dashboard-content">
      <div class="chart-section">
        <el-card class="chart-card">
          <template #header>
            <span>最近7天用户活跃度</span>
          </template>
          <div class="chart-placeholder">
            <p>图表区域 - 可集成 ECharts 等图表库</p>
          </div>
        </el-card>
      </div>
      
      <div class="recent-section">
        <el-card class="recent-card">
          <template #header>
            <span>最近活动</span>
          </template>
          <div class="recent-activities">
            <div v-for="activity in recentActivities" :key="activity.id" class="activity-item">
              <div class="activity-icon">
                <el-icon :color="activity.color">
                  <component :is="activity.icon" />
                </el-icon>
              </div>
              <div class="activity-content">
                <p class="activity-title">{{ activity.title }}</p>
                <p class="activity-time">{{ activity.time }}</p>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { User, Document, Notebook, DataAnalysis, Plus, Edit, Delete } from '@element-plus/icons-vue'

const stats = ref({
  totalUsers: 1234,
  totalQuestions: 567,
  totalPapers: 89,
  totalExams: 123
})

const recentActivities = ref([
  {
    id: 1,
    title: '新增用户：张三',
    time: '2小时前',
    icon: 'Plus',
    color: '#67C23A'
  },
  {
    id: 2,
    title: '编辑试卷：英语四级模拟题',
    time: '4小时前',
    icon: 'Edit',
    color: '#409EFF'
  },
  {
    id: 3,
    title: '删除题目：语法选择题',
    time: '6小时前',
    icon: 'Delete',
    color: '#F56C6C'
  },
  {
    id: 4,
    title: '新增试卷：听力理解测试',
    time: '8小时前',
    icon: 'Plus',
    color: '#67C23A'
  }
])

onMounted(() => {
  // 这里可以调用API获取实际数据
  console.log('Dashboard mounted')
})
</script>

<style scoped>
.dashboard {
  padding: 20px;
}

.dashboard-header {
  margin-bottom: 30px;
}

.dashboard-header h1 {
  color: #333;
  margin-bottom: 10px;
}

.dashboard-header p {
  color: #666;
  margin: 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 15px;
}

.stat-content h3 {
  font-size: 24px;
  font-weight: bold;
  margin: 0 0 5px 0;
  color: #333;
}

.stat-content p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.dashboard-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

.chart-card, .recent-card {
  height: 400px;
}

.chart-placeholder {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  border-radius: 4px;
  color: #999;
}

.recent-activities {
  max-height: 300px;
  overflow-y: auto;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-content {
  flex: 1;
}

.activity-title {
  margin: 0 0 4px 0;
  font-size: 14px;
  color: #333;
}

.activity-time {
  margin: 0;
  font-size: 12px;
  color: #999;
}

@media (max-width: 768px) {
  .dashboard-content {
    grid-template-columns: 1fr;
  }
  
  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}
</style>